<template>
  <div class="typefind">
    <van-sidebar v-model="activeKey" class="v1">
      <van-sidebar-item
        v-for="lis1 in list1"
        :key="lis1.index"
        :title="lis1.name"
        @click="typeClick(lis1.id)"
      />
    </van-sidebar>
    <van-sidebar v-model="activeKey1" class="v2">
      <van-sidebar-item v-for="lis in list" :key="lis.index" :title="lis.item" />
    </van-sidebar>
  </div>
</template>

<script>
export default {
  name: 'typefind',
  data () {
    return {
      activeKey: 0,
      activeKey1: 0,
      list: '',
      list1: '',
      id: ''
    }
  },
  created () {
    this.$http2.get('/js/keshi.json')
      .then(resp => {
        // console.log(that.id)
        this.list = resp.data.list1
      })
    this.$http3.get('/js/keshi1.json')
      .then(resp => {
        this.list1 = resp.data.keshi1
      })
  },
  methods: {
    typeClick (index) {
      this.id = index
      console.log(this.id)
    }
  }
}
</script>

<style lang="scss">
.typefind {
  display: flex;
  margin-top: 50px;
  .v1 {
    width: 100px;
  }
  .v2 {
    flex: 1;
    overflow-x: hidden;
    .van-sidebar-item--select::before {
      background-color: #1989fa;
    }
  }
  a {
    height: 80px;
    line-height: 40px;
    font-size: 16px;
  }
}
</style>
